<template>
  <div class="wrapper" v-if="detail.id">
    <div class='top'>
      <h3 v-if="detail.out_status == 3">退货申请审核中</h3>
      <h3 v-if="detail.out_status == 1">退货申请审核通过，请尽快发货</h3>
      <h3 v-if="detail.out_status == 2">退货申请被拒绝,原因：{{ detail.reason }}</h3>
      <h3 v-if="detail.out_status == 4">已发货，等待商家确认退货</h3>
      <h3 v-if="detail.out_status == 5">退货已完成</h3>
    </div>
    <Logistics v-if="logis" :logis="logis"></Logistics>
    <OrderAddress
      v-if="detail.out_status == 1 || detail.out_status == 4 || detail.out_status == 5"
      :name="detail.addressname"
      :mobile="detail.mobile"
      :province="detail.province"
      :city="detail.city"
      :district="detail.district"
      :address="detail.address"
    />
    <div class="goods-list">
      <p class="title">有惊喜</p>
      <GoodsItem
        :title="detail.name"
        :price="detail.pice"
        :count="Number(detail.out_num)"
        :img="detail.url"
      ></GoodsItem>
    </div>
    <div class="mid">
      <MsgItem title="退款总金额" :value="'￥' + (detail.pice * detail.out_num)"></MsgItem>
    </div>
    <template v-if="detail.out_status != 1">
      <div class="item">
        <p>退货原因</p>
        <textarea maxlength="100" placeholder="填写原因,不超过100字" v-model="reason" :readonly="detail.out_status != 2"></textarea>
      </div>
      <div class="item">
        <p>退货数量</p>
        <input type="tel" v-model="num" placeholder="请输入退货数量" readonly>
      </div>
      <div class="item">
        <p>上传图片(最多三张)</p>
        <div class="img-wrapper">
          <div class="img" v-for="item of imgArr" :key="item.id">
            <img :src="item.url" preview>
            <i v-if="detail.out_status == 2" @click="del(item.id)">X</i>
          </div>
          <template v-if="detail.out_status == 2">
            <label for="file" class="upload" v-show="imgArr.length < 3">
              <label for="file">点击上传</label>
            </label>
          </template>
        </div>
      </div>
      <div class="bar">
        <button class="confirm reject" @click="returnSubmit" v-if="detail.out_status == 2">提交</button>
        <button class="confirm resolve" @click="confirm" v-if="detail.out_status == 2">确认收货</button>
      </div>
      <input type="file" id="file" ref="file" @change="change">
    </template>
    <template v-if="detail.out_status == 1 && !detail.num">
      <div class="form">
        <div class="item">
          <span>选择快递公司</span>
          <select name="" id="" v-model="com">
            <option value="">请选择</option>
            <option value="yunda">韵达快递</option>
            <option value="youzhengguonei">邮政快递包裹</option>
            <option value="zhongtong">中通快递</option>
            <option value="yuantong">圆通速递</option>
            <option value="shunfeng">顺丰速运</option>
            <option value="huitongkuaidi">百世快递</option>
            <option value="shentong">申通快递</option>
            <option value="jd">京东物流</option>
            <option value="ems">EMS</option>
            <option value="tiantian">天天快递</option>
            <option value="debangwuliu">德邦</option>
            <option value="zhaijisong">宅急送</option>
            <option value="youshuwuliu">优速快递</option>
            <option value="debangkuaidi">德邦快递</option>
            <option value="baishiwuliu">百世快运</option>
            <option value="pjbest">品骏快递</option>
            <option value="transrush">TransRush</option>
            <option value="dhl">DHL-中国件</option>
            <option value="zhongtongkuaiyun">中通快运</option>
            <option value="annengwuliu">安能快运</option>
            <option value="suer">速尔快递</option>
            <option value="suning">苏宁物流</option>
            <option value="yundakuaiyun">韵达快运</option>
            <option value="adapost">安达速递</option>
          </select>
        </div>
        <div class="item">
          <span>快递单号</span>
          <input type="text" v-model="logisNum" placeholder="请输入快递单号">
        </div>
      </div>
      <div class="bar">
        <BigBtn text="发货" @click.native="submit" />
      </div>
    </template>
  </div>
</template>

<script>
  import _ from 'lodash'
  import Logistics from '@/components/logistics/Logistics.vue'
  import GoodsItem from '@/components/goodsItem/GoodsItem.vue'
  import MsgItem from '@/components/msgItem/MsgItem.vue'
  import BigBtn from '@/components/bigBtn/BigBtn.vue'
  import OrderAddress from '@/components/orderAddress/OrderAddress.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'ReturnGoodsDetail',
    components: {
      Logistics,
      GoodsItem,
      MsgItem,
      BigBtn,
      OrderAddress
    },
    created() {
      this._get()
    },
    data() {
      return {
        detail: {},
        reason: '',
        num: '',
        com: '',
        logisNum: '',
        imgArr: [],
        logis: '',
        show: false
      }
    },
    computed: {
      ...mapState(['openId', 'userState']),
      imgArrId() {
        let arr = this.imgArr.map(item => {
          return item.id
        })
        return arr.toString()
      }
    },
    methods: {
      async change() {
        const img = this.$refs.file.files[0]
        const type = img.type.split('/')[1]
        this.$refs.file.value = ''
        if(type != "jpeg" && type != "png" && type != "jpg") {
          this.$toast('请上传jpeg,png,jpg格式图片')
          return
        }
        if(img.size / 1024 / 1024 > 5) {
          this.$toast('图片不能大于5MB')
          return
        }
        let formData = new FormData()
        formData.append('name', img)
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/image',
          method: 'POST',
          data: formData
        })
        if(code === 0) {
          this.imgArr.push({
            id: data.id,
            url: data.url
          })
          this.$nextTick(() => {
            this.$previewRefresh()
          })
        }
      },
      del(id) {
        this.imgArr = this.imgArr.filter(item => {
          return item.id !== id
        })
      },
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/goods',
          method: 'GET',
          params: {
            order: this.$route.params.id,
            id: this.$route.params.mid,
            openid: this.openId
          }
        })
        if(code === 0) {
          data.items[0].imgArr = data.pic.map((item) => {
            return item[0]
          })
          this.detail = data.items[0]
          this.reason = this.detail.out_reason
          this.num = this.detail.out_num
          this.imgArr = this.detail.imgArr
          if(this.detail.num) {
            this.getLogistics(this.detail.com, this.detail.num)
          }
        }
      },
      async getLogistics(com, num) {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/platform/expre',
          method: 'GET',
          params: {
            com,
            num
          }
        })
        if(code === 0) {
          if (Array.isArray(data)) {
            let logisArr = data[0].data.map(item => {
              item.day = item.time.substring(5, 10)
              item.time = item.time.substring(11, 16)
              return item
            })
            this.logis = {
              com: data[0].com,
              num: data[0].nu,
              logisArr
            }
          } else {
            this.logis = data
          }
        }
      },
      returnSubmit() {
        if(!this.reason) {
          this.$toast('请输入退货原因')
          return
        }
        if(!this.num) {
          this.$toast('请输入退货数量')
          return
        }
        if(isNaN(this.num)) {
          this.$toast('请正确输入退货数量')
          return
        }
        if(this.num > this.detail.order_num) {
          this.$toast('退货数量不能大于购买数量')
          return
        }
        if(this.imgArr.length == 0) {
          this.$toast('请上传图片')
          return
        }
        this._returnSubmit()
      },
      _returnSubmit: _.throttle(async function() {
        let { data: { code, data  } } = await this.$axios({
          url: '/v1/merchant/outupdate',
          method: 'POST',
          data: {
            picture_id: this.imgArrId,
            out_reason: this.reason,
            id: this.detail.id,
            openid: this.openId
          }
        })
        if (code === 0) {
          this.$toast(data)
          setTimeout(() => {
            this.$router.replace({
              name: 'Center'
            })
          }, 1500)
        }
      }, 2000, { trailing: false }),
      submit() {
        this.$confirm('确认发货吗？').then(() => {
          this._submit()
        })
      },
      _submit: _.throttle(async function() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/ordinary',
          method: 'POST',
          data: {
            order: this.$route.params.id,
            com: this.com,
            num: this.logisNum,
            id: this.$route.params.goodid,
            openid: this.openId
          }
        })
        if (code === 0) {
          this.$toast(data)
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        }
      }),
      async confirm() {
        this.$confirm('是否放弃退款确认收货?').then(() => {
          this._confirm()
        })
      },
      _confirm: _.throttle(async function() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/confirm',
          method: 'POST',
          data: {
            order_code: this.$route.params.id,
            openid: this.openId
          }
        })
        if (code === 0) {
          this.$toast(data)
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        }
      }, 2000, { trailing: false }),
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  #file {
    display: none;
  }
  .slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .slide-enter-active, .slide-leave-active {
    transition:  all 0.2s linear;
  }
  .logistics-msg {
    position: relative;
    padding: 0.2rem;
    background: #fff;
    margin-bottom: 0.2rem;
    p {
      margin-bottom: 0.1rem;
      font-size: 0.24rem;
    }
    span {
      font-size: 0.2rem;
      color: $colorGray;
    }
    h3 {
      position: absolute;
      right: 0.2rem;
      bottom: 0.2rem;
      font-size: 0.2rem;
      color: $colorGray;
    }
  }
  .wrapper {
    min-height: 100vh;
    background: #eee;
    padding-top: 0.2rem;
    .top {
      text-align: center;
      margin-bottom: 0.2rem;
      padding: 0.6rem 0;
      background: orange;
      color: #fff;
      h3 {
        font-size: 0.32rem;
      }
      h5 {
        font-size: 0.28rem;
      }
    }
    .mid {
      margin-top: 0.2rem;
      padding: 0 0.2rem;
      background: #fff;
    }
    .item {
      display: flex;
      margin-top: 0.2rem;
      padding: 0.2rem;
      background: #fff;
      font-size: 0.28rem;
      p {
        padding: 0.06rem;
        flex: 0 0 1.5rem;
        width: 1.5rem;
      }
      textarea {
        flex: 1;
        display: block;
        height: 1.6rem;
        resize: none;
        background: #eee;
        font-size: 0.28rem;
        padding: 0.1rem;
      }
      span {
        display: block;
        flex: 0 0 2rem;
        width: 2rem;
        margin-right: 0.4rem;
      }
      input {
        flex: 1;
        display: block;
        font-size: 0.24rem;
      }
      select {
        flex: 1;
        display: block;
        font-size: 0.24rem;
        padding: 0;
        background: #fff;
      }
      .img-wrapper {
        flex: 1;
        .upload {
          border: 1px dashed $colorGray;
          margin-right: 0;
          border-radius: 5px;
          text-align: center;
          z-index: 0;
          label {
            position: absolute;
            @include center;
            z-index: -1;
          }
        }
        .img {
          margin-right: 0.2rem;
        }
        .img, .upload {
          position: relative;
          display: inline-block;
          width: 1.5rem;
          height: 1.5rem;
          vertical-align: middle;
          img {
            width: 100%;
            height: 100%;
          }
          i {
            position: absolute;
            font-style: normal;
            font-size: 0.2rem;
            right: 0;
            top: 0;
            transform: translate3d(50%, -50%, 0);
            width: 0.3rem;
            height: 0.3rem;
            line-height: 0.3rem;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            text-align: center;
            border-radius: 50%;
          }
        }
      }
    }
    .bar {
      margin-top: 0.2rem;
      // background: #fff;
      padding: 0.2rem;
      text-align: center;
      margin-bottom: 50px;
      button {
        padding: 0.2rem;
        border:none;
        border-radius: 5px;
        color: #fff;
        font-size: 0.28rem;
        margin: 0 0.2rem;
        display: inline-block;
      }
      .submit {
        display: inline-block;
        width: 2.5rem;
        background: $colorRed;
      }
      .confirm {
        margin: 0 0.2rem;
        display: inline-block;
        width: 2.5rem;
        &.reject {
          background: orange;
        }
        &.resolve {
          background: $colorRed;
        }
      }
    }
    .goods-list {
      padding: 0 0.2rem;
      margin-bottom: 0.2rem;
      background: #FFF;
      .title {
        padding: 0.1rem 0;
        font-size: 0.24rem;
        border-bottom: 1px solid $bgGray;
      }
      .price {
        font-size: 0.2rem;
        text-align: right;
      }
    }
  }
</style>